<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat</title>
    <link href="style.css" rel="stylesheet">
    <style>
        .radius6 {
            /*-moz-border-radius: 6px;*/
            /*-ms-border-radius: 6px;*/
            /*-o-border-radius: 6px;*/
            /*-webkit-border-radius: 6px;*/
            border: none;
            border-radius: 30px !important;
        }
        .radius6:active{
            box-shadow: 0 5px #666;
            transform: translateY(4px);
        }

        .sizeB {
            width: 50px;
            height: 50px;
            margin-right: 6px;
            margin-top: 6px;
            cursor: pointer;
        }
        .button1 {background-color: #4CAF50;}
        .button3 {background-color: #f44336;}

    </style>
    <script src="../js/jQuery3.3/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        var ws;
//参考文档 ： http://www.runoob.com/html/html5-websocket.html
        function init() {

            var wsStr = "ws://10.20.0.16:2222/chat";
            //wsStr = "http://10.20.0.76:8080/webchat";
            ws = new WebSocket(wsStr);

            ws.onopen = function (event) {
                //ws.send("getReCaptcha");
            };

            ws.onmessage = function (event) {

                initButton($.parseJSON(event.data));
            };

            ws.onclose = function (event) {
                //ws.send(document.getElementById("login").value + " left the chat");
            }
        }

        var textValue="";

        function initButton(jsonObjTest) {
            $("#imgNum").attr("src", jsonObjTest.imgBase64Str);
            $("#prompt").text(jsonObjTest.prompt);

            $("input[name='numberName']").click(function () {
                textValue += $(this).val();
                $("#messageValue").val(textValue);
            });

            $("input[name='clearName']").click(function () {
                textValue="";
                $("#messageValue").val(textValue);
            });

            $("input[name='confirmName']").click(function () {
                ws.send($("#messageValue").val());
            });
        }

        $(document).ready(function () {

            // testJosnData();

            init();

        });

        function testJosnData() {
            var jsonObjTest = {
                imgKey: "imgKey--111",
                imgBase64Str: "",
                prompt: "请输入香蕉行！",
                value: ""
            };
            initButton(jsonObjTest);
        }

    </script>
</head>
<body bgcolor="#81d4fa">

<div align="center">
    <BR><BR><BR><BR><BR><BR>
    <img id="imgNum" src="">
    <div id="prompt" style="margin-top: 5px;"></div>
    <BR><BR>
    <input type="text" id="messageValue" value="" style="width:180px;height: 50px;font-size: 20px;"/><BR>
    <BR><BR>
    <input type="button" name="numberName" class="radius6 sizeB " value="1"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="2"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="3"/><br>
    <input type="button" name="numberName" class="radius6 sizeB " value="4"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="5"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="6"/><br>
    <input type="button" name="numberName" class="radius6 sizeB " value="7"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="8"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="9"/><br>
    <input type="button" name="clearName" class="radius6 sizeB button3" value="清除"/>
    <input type="button" name="numberName" class="radius6 sizeB " value="0"/>
    <input type="button" name="confirmName" class="radius6 sizeB button1" value="确定"/><br>
</div>
</body>
</html>